<template>
  <div style="background: #ebe8eb">
    <Head
      :hasSearch="true"
      :searchGoods="searchGoods"
      :classificationId="currentClassificationId"
    ></Head>

    <div class="content">
      <el-row class="banner">
        <el-col :span="6" class="type-box">
          <div class="type">
            <div class="title">分类</div>
            <div style="display: flex; flex-wrap: wrap">
              <div
                class="goods-type"
                v-for="(item, i) in classificationList"
                @click="searchGoods(item.id)"
              >
                {{ item.title }}
                <span style="margin-left: 10px">/</span>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="18">
          <el-carousel class="carousel" height="280px">
            <el-carousel-item>
              <img src="../assets/pet_img3.jpeg" height="280px" />
            </el-carousel-item>
            <el-carousel-item>
              <img src="../assets/pet_img1.jpeg" height="280px" />
            </el-carousel-item>
            <el-carousel-item>
              <img src="../assets/pet_img2.jpeg" height="280px" />
            </el-carousel-item>
          </el-carousel>
        </el-col>
      </el-row>

      <div class="recommend-header">
        <div>
          <span class="title">猜你喜欢</span>
          <img
            src="https://gw.alicdn.com/imgextra/i2/O1CN016b1mMM1FxJlsXfWhU_!!6000000000553-2-tps-96-30.png"
            class="logo"
          />
        </div>

        <!-- <el-button
          v-if="userInfo?.role === 1"
          type="primary"
          @click="showCreate()"
        >
          添加商品
        </el-button> -->
      </div>

      <ul class="list">
        <li v-for="goods in goodsList">
          <img
            :src="goods.images[0]?.url"
            alt=""
            @click="gotoDetail(goods.id)"
          />
          <!-- <img
            src="https://gw.alicdn.com/imgextra/i4/199606933/O1CN01n3wLKf215MqoRj6Zf_!!199606933.jpg_110x10000Q75.jpg_.webp"
            alt=""
          /> -->
          <div class="goods-info">
            <p class="goods-name" @click="gotoDetail(goods.id)">
              {{ goods.goodsName }}
            </p>
            <p class="goods-money">¥ {{ goods.price }}</p>
            <div
              style="
                display: flex;
                justify-content: space-between;
                align-items: center;
              "
            >
              <p class="goods-address">{{ goods.address }}</p>
            </div>
            <div style="display: flex; margin-top: 6px">
              <div class="scan-num">
                <el-icon style="margin-right: 2px"><View /></el-icon>
                {{ goods.scanNum }}
              </div>

              <div class="scan-num" style="margin-left: 10px">
                <el-icon style="margin-right: 2px">
                  <Star />
                </el-icon>
                {{ goods.wishNum }}
              </div>
            </div>
          </div>
        </li>
      </ul>
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.pageNum"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="queryInfo.pageSize"
          layout="total, sizes, prev, pager, next"
          :total="total"
        />
      </div>
    </div>

    <Footer></Footer>

    <el-backtop :right="100" :bottom="100" />

    <el-dialog
      v-model="dialogVisible"
      title="添加商品"
      @close="handleClose"
      width="500px"
    >
      <el-form
        :model="addGoodsForm"
        ref="addressFormRef"
        :rules="formRules"
        label-width="100px"
        style="max-width: 460px"
      >
        <el-form-item label="商品名称" prop="goodsName">
          <el-input
            v-model="addGoodsForm.goodsName"
            style="width: 150px"
          ></el-input>
        </el-form-item>

        <el-form-item label="上架数量" prop="goodsNum">
          <el-input-number v-model="addGoodsForm.goodsNum" :min="1" />
        </el-form-item>
        <el-form-item label="价格" prop="price">
          <el-input-number v-model="addGoodsForm.price" :min="0" />
        </el-form-item>
        <el-form-item label="上架时间" prop="groudingTime">
          <el-date-picker
            v-model="addGoodsForm.groudingTime"
            type="date"
            placeholder="选择上架时间"
            :size="size"
          />
        </el-form-item>

        <el-form-item label="生产日期" prop="groudingTime">
          <el-date-picker
            v-model="addGoodsForm.productTime"
            type="date"
            placeholder="选择上架时间"
            :size="size"
          />
        </el-form-item>
        <el-form-item label="生产厂商" prop="productor">
          <el-input
            type="textarea"
            autosize
            v-model="addGoodsForm.productor"
          ></el-input>
        </el-form-item>
      </el-form>

      <template #footer>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSubmit">添加</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref } from 'vue'
import Head from '../components/Head.vue'
import Footer from '../components/Footer.vue'
import {
  getClassificationList,
  getNormsList,
  getGoodsList,
  scanGoods,
  wishGoods
} from '../api/goods.js'
export default {
  components: {
    Head
  },
  data() {
    return {
      origin: 'http://43.136.166.102:8090',
      userInfo: JSON.parse(window.localStorage.getItem('user_info')),
      searchInput: '',
      classificationList: [],
      normsList: [],
      goodsList: [],
      total: 0,
      classificationId: '',
      addGoodsForm: {
        adress: '',
        goodsName: '',
        goodsNum: '',
        groudingTime: '',
        price: '',
        productTime: '',
        productor: ''
      },
      dialogVisible: false,
      currentClassificationId: '',
      queryInfo: {
        pageNum: 1,
        pageSize: 10
      }
    }
  },
  methods: {
    handleSizeChange(newSize) {
      this.queryInfo.pageSize = newSize
      this.searchGoods()
    },
    handleCurrentChange(newPage) {
      this.queryInfo.pageNum = newPage
      this.searchGoods()
    },
    showCreate() {
      this.dialogVisible = true
    },
    gotoDetail(id) {
      scanGoods({ goodsId: id, userId: this.userInfo.id })
      this.$router.push('/goods/' + id)
    },
    searchGoods(classificationId, keywords) {
      this.currentClassificationId = classificationId
      getGoodsList({
        ...this.queryInfo,
        keywords,
        classificationId
      }).then((res) => {
        this.goodsList = res.list
        this.total = res.total
      })
    },
    search() {
      getNormsList({ page: 1, pageSize: 100, name: this.searchInput }).then(
        (res) => {
          this.normsList = res.data
        }
      )
    },
    getClassification() {
      getClassificationList({ pageNum: 1, pageSize: 100 }).then((res) => {
        this.classificationList = res.records
        console.log(res)
      })
    },
    handlerStar(item) {
      console.log(item)
      wishGoods({ goodsId: item.id, userId: this.userInfo.id }).then(() => {
        this.$message.success('收藏成功')
      })
    }
  },
  created() {
    this.getClassification()
    this.searchGoods()
  }
}
</script>

<style lang="less" scoped>
body {
  background-color: #e2e7e9;
}
ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 28px;
}
.content {
  background: #fff;
  padding: 20px 0;
  width: 1100px;
  margin: auto;
  margin-top: 120px;
  margin: 20px auto;
  padding: 20px;
  border-radius: 20px;

  .recommend-header {
    height: 24px;
    margin-top: 60px;
    margin-left: 6px;
    display: flex;
    justify-content: space-between;
    .title {
      float: left;
      color: #111;
      font-weight: bold;
      font-size: 24px;
      line-height: 24px;
    }
    .logo {
      height: 20px;
      margin: 4px 0 0 6px;
    }
  }
}
.banner {
  .type-box {
    background: #f7f9fa;
    border-radius: 20px;
    .type {
      padding: 20px;
      .title {
        font-size: 20px;
        font-weight: 600;
        color: #333;
        line-height: 33px;
        margin-bottom: 10px;
      }
      .goods-type {
        padding: 8px 0;
        font-size: 15px;
        flex-basis: 30%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: pointer;
      }
    }
  }
  .carousel {
    margin-left: 20px;
    border-radius: 20px;
    img {
      width: 100%;
    }
  }
}

.white {
  background-color: #ffffff;
}
.list > li {
  background: #fff;
  width: 14%;
  padding: 20px;
  background: #f5f5f5;
  border-radius: 10px;
}

.list {
  width: 1100px;
  margin: 40px auto;
  display: flex;
  flex-wrap: wrap;
}

.list img {
  width: 100%;
}

.goods-name {
  color: #666;
  font-size: 14px;
  font-weight: 400;
  margin-top: 20px;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.goods-name:hover {
  color: #f30213 !important;
  text-decoration: underline;
  cursor: pointer;
}
.goods-address {
  color: #666;
  font-size: 14px;
  font-weight: 400;
  overflow: hidden;
}
.goods-star:hover {
  color: #f30213;
}

.goods-money {
  color: #f30213;
  font-family: Microsoft YaHei UI;
  font-size: 20px;
  font-weight: 700;
  margin-top: 14px;
  text-align: left;
}

.recommend {
  color: #000;
  font-family: Microsoft YaHei UI;
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 22px;
  text-align: center;
  margin-top: 50px;
}

.goods-list {
  width: 1100px;
  margin: 0 auto;
  margin-top: 43px;
}
.goods-item {
  display: flex;
  margin-bottom: 20px;
  border-bottom: 1px solid #cacdd1;
  padding: 20px;
}
.goods-type {
  font-size: 12px;
  color: #666;
  margin-top: 10px;
}
.goods-item img {
  width: 160px;
  margin-right: 40px;
}

.goods-item .goods-name {
  font-size: 18px;
  color: rgba(0, 0, 0, 0.85);
}

.goods-item .goods-num {
  font-size: 14px;
  color: red;
  margin-top: 10px;
}

.footer {
  background-color: #ff1d21;
  color: #fff;
  text-align: center;
  padding: 10px;
  bottom: 0;
}

.footer .web-title {
  font-size: 20px;
  font-weight: 500;
}
.footer ul {
  color: #fff;
  display: flex;
  font-size: 14px;
  justify-content: center;
}
.footer ul li {
  margin: 14px;
}
.footer-icon {
  margin: 10px 30px;
  display: flex;
  justify-content: center;
}
.footer-icon div {
  margin: 0 20px;
}
.star img {
  width: 12px;
}
.scan-num {
  display: flex;
  align-items: center;
  color: #888;
  font-size: 13px;
}
</style>
